<template>
  <div class="a-album-box">
    <div class="a-album">
      <div class="a-all" v-for="track in hotAlbums" :key="track.id">
        <!-- allalbum -->
        <a class="a-img" @click="goalbumpage(track.id)">
          <img :src="track.blurPicUrl" alt="" />
          <span></span>
        </a>
        <div class="a-text">
          <a href="">{{ track.name }}</a>
          <span>{{ moment(track.publishTime).format("YYYY-MM-DD") }}</span>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="parseInt(total * 10)"
      @current-change="changepage"
    >
    </el-pagination>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      id: this.$route.query.id,
      limit: 12,
      offset: 0,
      hotAlbums: [],
      //   分页
      limitIndex: 0,
      total: 0,
      moment,
    };
  },
  mounted() {
    this.getArtistAlbumList();
  },
  methods: {
    // 发送专辑 reqArtistAlbumList
    /*   可选参数 : limit: 取出数量 , 默认为 30
    offset: 偏移数量 , 用于分页 , 如 :( 页数 -1)*30, 其中 30 为 limit 的值 , 默认 为 0
    接口地址 : /artist/album
    调用例子 : /artist/album?id=6452&limit=5 ( 周杰伦 ) */
    async getArtistAlbumList() {
      const par = {
        id: this.id,
        limit: this.limit,
        offset: this.limit * this.limitIndex,
      };
      const result = await this.$API.reqArtistAlbumList(par);
      console.log(result);
      if (result.code == 200) {
        this.hotAlbums = result.hotAlbums || [];
        this.total = Math.ceil(result.artist.albumSize / 12) || 0;
      }
    },
    goalbumpage(id) {
      this.$router.push(`/albumpage?id=${id}`)
    },
    
    // 分页监听器
    changepage(index) {
      // console.log(index)
      this.limitIndex = index - 1;
      this.getArtistAlbumList();
    },
  },
};
</script>

<style lang="less" scoped>
.a-album-box {
  display: flex;
  flex-direction: column;
}
.a-album {
  display: flex;
  flex-flow: wrap;
  //   flex-direction: column;
}
.a-all {
  width: 25%;
  margin-top: 10px;
  .a-img {
    position: relative;
    img {
      width: 120px;
      height: 120px;
    }
    span {
      position: absolute;
      width: 145px;
      height: 120px;
      display: block;
      top: -104px;
      background-position: -170px -850px;
      background-image: url("~@/assets/image/coverall.png");
    }
  }
  .a-text {
    a {
      color: #000;
    }
    span {
      color: #666;
      font-size: 12px;
    }
    display: flex;
    flex-direction: column;
  }
}
</style>
